<template>
	<article class="article-box">
		<div class="chart-item-inner">
			<el-row class="chart-container">
				<el-col
					v-for="(processItem, processIndex) in processList"
					:key="processIndex"
					:span="span"
					class="workshop-item"
				>
					<div class="process-box">
						<!--<div class="card-title">{{ processItem.processName }}</div>-->
						<div
							v-for="(areaItem, areaIndex) in processItem.itemList"
							:key="areaIndex"

							class="process-item"
						>
							<div class="flex-between-center">
								<div style="font-size: 13px;">{{ areaItem.areaName }}</div>
								<!--<div style="color: #2b85e4;font-size: 12px;">{{ processItem.temHum }}</div>-->
							</div>
							<div class="flex-start-center">
								<div class="tem-hum-box">
									<div
										:class="[
											!areaItem.temState ? 'animation-class' : '',
											'tem-hum-icon'
										]"
										:style="{ color: !areaItem.temState ? 'orangered' : '#19be6b', borderColor: !areaItem.temState ? 'orangered' : '#19be6b' }"
									>
										<div class="el-icon-s-opportunity"></div>
									</div>
									<!--<div>温度:</div>-->
									<div class="tem-hum-val">{{ areaItem.temValue || 0 }}℃</div>
								</div>
								<div class="tem-hum-box">
									<div
										:class="[
											!areaItem.humState ? 'animation-class' : '',
											'tem-hum-icon'
										]"
										:style="{ color: !areaItem.humState ? 'orangered' : '#19be6b', borderColor: !areaItem.humState ? 'orangered' : '#19be6b' }"
									>
										<div class="el-icon-heavy-rain"></div>
									</div>
									<!--<div>湿度:</div>-->
									<div class="tem-hum-val">{{ areaItem.humValue || 0 }}%</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>

	</article>

</template>

<script>

    import {
        machineManagerAreaSingleGetTemNum,
        machineManagerMachineGetAvgHumTem
    } from '../../../../../api/production/kanBan';
    export default {
        name: 'FloorTemHumChart',
        props: {
            refreshData: {
                type: [Number, String],
                default: ''
            },
            workshopId: {
                type: Number,
                default: null
            },
            processCode: {
                type: String,
                default: 'XS'
            },
            span: {
                type: Number,
                default: 12
            }
        },
        data() {
            return {
                processList: [],
                floorIndexNum: 12,
                floorInfo: {}
            };
        },
        methods: {
            getDataRequest() {
                return machineManagerAreaSingleGetTemNum().then(res => {
                    if (res.data.status === 200) {
                        this.processList = res.data.res || [];
                        if (res.data.res) {
                            res.data.res.map(x => {
                                this.$set(this.floorInfo, x.workshopCode, {
                                    avgTem: x.avgTem,
                                    avgHum: x.avgHum,
                                    workshopCode: x.workshopCode,
                                    workshopName: x.workshopName
                                });
                                return x;
                            });
                        } else {
                            this.floorInfo = {};
                        }
                    }
                });
            }
        },
        watch: {
            refreshData: {
                handler() {
                    this.getDataRequest();
                },
                deep: true,
                immediate: true
            }
        },
        mounted() {
        },
        destroyed() {
        }
    };
</script>

<style scoped lang="scss">
.article-box {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: #c5c8ce;
    .chart-item-inner {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        box-sizing: border-box;
        .chart-container {
            width: 100%;
            height: 100%;
            overflow: auto;
            .workshop-item {
                border-radius: 10px;
                box-sizing: border-box;
                .process-box {
                    width: 100%;
                    height: 100%;
                    .card-title {
                        box-sizing: border-box;
                        font-size: 12px;
                        border-left: solid 4px #2b85e4;
                        margin-bottom: 10px;
                        padding-left: 4px;
                        color: #2b85e4;
                        font-weight: 700;
                    }
                    .process-item {
                        box-shadow: 0 0 1px 1px #2b5790;
                        //border: solid 1px #2b85e4;
                        border-bottom: none;
                        padding: 6px 10px;
                        box-sizing: border-box;
                        border-radius: 4px;
                        background: rgb(38, 47, 112);
                        .tem-hum-box {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            margin: 5px 0;
                            font-size: 14px;
                            .tem-hum-icon {
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                                border: solid 1px orangered;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 14px;
                                margin-right: 4px;
                                flex-shrink: 0;
                            }
                            .animation-class {
                                animation: upkeepCircle 1s ease-in infinite;
                            }
                            @keyframes upkeepCircle {
                                0% {
                                    opacity: 1;
                                    box-shadow: 0 0 5px 3px orangered;
                                }
                                50% {
                                    opacity: .5;
                                    box-shadow: 0 0 0 0 orangered;
                                }
                                100% {
                                    opacity: 1;
                                    box-shadow: 0 0 5px 3px orangered;
                                }
                            }
                            .tem-hum-val {
                                margin-right: 4px;
                            }
                        }
                    }
                    .process-item:last-child {
                    }
                }
            }

        }
        // 滚动条样式
        .chart-container::-webkit-scrollbar{
            width: 6px;
            height: 7px;
        }
        .chart-container::-webkit-scrollbar-thumb:hover{
            width: 6px;
            height: 7px;
            cursor: pointer;
            background-color: #114896;
        }
        .chart-container::-webkit-scrollbar-thumb{
            border-radius: 1em;
            background-color: #1A2F68;
        }
        .chart-container::-webkit-scrollbar-track{
            border-radius: 1em;
            background-color: rgba(50,50,50,.1);
        }
    }
}

</style>
